<template>
  <div class="wrap-index">
    <Header></Header>
    <div class="flex-row-start-start">
      <div class="left-side" style="margin-top: 108px">
        <div>
          <div
            class="tab1 flex-row-center-center"
            :class="{ active: leftTab == '库区概览' }"
            @click="changeTab('库区概览')"
          >
            <div
              style="height: 158px; letter-spacing: 11.5px"
              class="flex-row-center-center"
            >
              库区概览
            </div>
          </div>
          <!-- <div
            class="tab1 flex-row-center-center"
            style="margin-top: 20px"
            :class="{ active: leftTab == '特定库区' }"
            @click="changeTab('特定库区')"
          >
            <div
              style="height: 158px; letter-spacing: 11.5px"
              class="flex-row-center-center"
            >
              特定库区
            </div>
          </div>
          <div
            class="tab1 flex-row-center-center"
            style="margin-top: 20px"
            :class="{ active: leftTab == '井组信息' }"
            @click="changeTab('井组信息')"
          >
            <div
              style="height: 158px; letter-spacing: 11.5px"
              class="flex-row-center-center"
            >
              井组信息
            </div>
          </div> -->
        </div>
      </div>
      <div class="right-side" style="margin-top: 34px">
        <div class="flex-row-start-start" v-if="leftTab != '井组信息'">
          <RadioGroup v-model="selTab" type="button" size="large">
            <Radio label="基础信息"> </Radio>
            <Radio label="事故信息"></Radio>
            <Radio label="历史状态"></Radio>
            <Radio label="检测点信息"></Radio>
          </RadioGroup>
        </div>
        <div v-else>
          <div class="flex-row-start-start">
            <RadioGroup v-model="selTab" type="button" size="large">
              <Radio label="检测点数值"> </Radio>
              <Radio label="历史状态"></Radio>
              <Radio label="事故信息"></Radio>
            </RadioGroup>
          </div>
        </div>
        <kq-overview
          v-if="leftTab == '库区概览'"
          :queryParam="queryParam"
          :selTab="selTab"
          :selQk="selQk"
          :showJz="showJz"
        ></kq-overview>
        <spec-area
          v-if="leftTab == '特定库区'"
          :queryParam="queryParam"
          :selTab="selTab"
          :selQk="selQk"
          :showJz="showJz"
        ></spec-area>
        <jz-info
          v-if="leftTab == '井组信息'"
          :queryParam="queryParam"
          :selTab="selTab"
          :curJz="curJz"
          :selQk="selQk"
          :showJz="showJz"
        ></jz-info>
      </div>
    </div>
  </div>
</template>
<script>
import Header from "./components/index/header";
import kqOverview from "./components/overview/kqOverview";
import specArea from "./components/overview/specArea";
import jzInfo from "./components/overview/jzInfo";
export default {
  data() {
    return {
      leftTab: "库区概览",
      selTab: "基础信息",
      selQk: "",
      queryParam: "",
      curJz: "",
      showJz:false
    };
  },
  components: {
    Header,
    kqOverview,
    specArea,
    jzInfo,
  },
  methods: {
    changeTab(val) {
      this.leftTab = val;
    },
  },
  mounted() {
   
    if (
      this.$route.query.selTab != undefined &&
      this.$route.query.selTab != ""
    ) {
      this.queryParam = this.$route.query.name;
      this.leftTab = this.$route.query.selTab;
      this.selTab = this.$route.query.selType;
      this.selQk = this.$route.query.selKq;
      this.showJz = this.$route.query.showJz
      if (this.$route.query.curJz != undefined) {
        this.curJz = this.$route.query.curJz;
      }
    }
  },
};
</script>
<style  scoped>
.tab1:hover {
  cursor: pointer;
}
.left-side {
  width: 9.46%;
}

.tab1 {
  width: 35.16%;
  height: 176px;
  color: rgba(255, 255, 255, 100);
  font-size: 28px;
  text-align: center;
  font-family: PingFangSC-regular;
  border-radius: 4px;
  color: rgba(0, 0, 0, 1);
  background-color: #f1f1f1;
  text-align: center;
  writing-mode: tb-rl;
}
.active {
  background-color: #ff5454;
  color: rgba(255, 255, 255, 100);
}
.wrap {
  width: 100%;
  height: 100%;
  /* position: fixed; */
}
.content {
  margin-top: 32px;
  margin-left: 1.2%;
  margin-right: 1.2%;
}

.middle-side {
  width: 48.05%;
  margin-right: 1.3%;
}
.right-side {
  width: 85.68%;
}
</style>